import React from "react";

import Tabs, { TabsProps } from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

interface ComponentProps {
  list: any[];
  info: any;
  demoIndex?: number;
}

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

export const TabPanel = function (props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}>
      {value === index && <div style={{ padding: 24 }}>{children}</div>}
    </div>
  );
};

export default ({ list, info, demoIndex }: ComponentProps) => {
  const { title, description, instruction } = info;

  const [value, setValue] = React.useState(demoIndex || 0);

  const handleChange = (event: any, newValue: number) => {
    setValue(newValue);
  };

  return (
    <div className="demo-wrapper">
      <h2>基本使用</h2>
      <h3>简介</h3>
      <div>{instruction}</div>
      <h3>效果演示</h3>
      <div className="section">
        <div style={{ flexShrink: 1 }}>
          <Tabs orientation="vertical" value={value} onChange={handleChange}>
            {list.map(({ key, text }) => (
              <Tab label={text} key={"label-" + key} />
            ))}
          </Tabs>
        </div>

        <div style={{ flexGrow: 1 }}>
          {list.map(({ key, text, content }, index) => (
            <TabPanel value={value} index={index} key={"key-" + key}>
              {content}
            </TabPanel>
          ))}
        </div>
      </div>
    </div>
  );
};
